{extend name="public/layout"/}
{block name="main"}
<div class="layui-tab layui-tab-brief" lay-filter="user">
    <ul class="layui-tab-title" id="LAY_mine">
        <li class="layui-this" lay-id="info">{:lang('BasicSettings')}</li>
        <li lay-id="avatar">{:lang('Avatar')}</li>
        <li lay-id="pass">{:lang('Password')}</li>
    </ul>
    <div class="layui-tab-content" style="padding: 20px 0;">
        <div class="layui-form layui-form-pane layui-tab-item layui-show">
            <form class="layui-form" method="post">
                <div class="layui-form-item"> <label class="layui-form-label">{:lang('userName')}</label>
                    <div class="layui-input-inline">
                        <input type="text" name="username" required="" lay-verify="required" autocomplete="off" value="{$userinfo.username}" class="layui-input" disabled style="cursor: not-allowed !important;">
                    </div>
                </div>
                <div class="layui-form-item"> <label class="layui-form-label">{:lang('nickname')}</label>
                    <div class="layui-input-inline">
                        <input type="text" name="nickname" required="" lay-verify="required" autocomplete="off" value="{$userinfo.nickname}" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item"> <label class="layui-form-label">{:lang('phone')}</label>
                    <div class="layui-input-inline"> <input type="text" name="mobile" required="" lay-verify="phone" autocomplete="off" value="{$userinfo.mobile}" class="layui-input" disabled style="cursor: not-allowed !important;"></div>
                    {eq name="userinfo.ischeck_mobile" value="1"}
                    <button class="layui-btn layui-iframe" type="button" href="{:url('changemobile')}" lay-data="{width:'440px',height:'250px',title:'{:lang('PhoneEdit')}'}">{:lang('Edit')}</button>
                    {else/}
                    <button class="layui-btn layui-iframe layui-btn-danger" type="button" href="{:url('actmobile')}" lay-data="{width:'440px',height:'250px',title:'{:lang('ActivatePhone')}'}">{:lang('Activation')}</button>
                    {/eq}
                </div>
                <div class="layui-form-item"> <label class="layui-form-label">{:lang('email')}</label>
                    <div class="layui-input-inline"> <input type="text" name="email" required="" lay-verify="email" autocomplete="off" value="{$userinfo.email}" class="layui-input" disabled style="cursor: not-allowed !important;"> </div>
                    {eq name="userinfo.ischeck_email" value="1"}
                    <button class="layui-btn layui-iframe" type="button" href="{:url('changeemail')}" lay-data="{width:'440px',height:'250px',title:'{:lang('EmailEdit')}'}">{:lang('Edit')}</button>
                    {else/}
                    <button class="layui-btn layui-iframe layui-btn-danger" type="button" href="{:url('actemail')}" lay-data="{width:'440px',height:'250px',title:'{:lang('ActivateMailbox')}'}">{:lang('Activation')}</button>
                    {/eq}
                </div>
                {:hook("user_config")}
                <div class="layui-form-item"> <button class="layui-btn" lay-submit="{:url('member/index/profile')}" data-refresh="false">{:lang('Confirm')}</button> </div>
            </form>
        </div>
        <div class="layui-form layui-form-pane layui-tab-item">
            <div class="layui-form-item">
                <div class="avatar-add">
                    <p>{:lang('AvatarUploadRules')}</p> <button type="button" class="layui-btn upload-img"> <i class="layui-icon"></i>{:lang('UploadAvatar')} </button><input class="layui-upload-file" type="file" accept="undefined" name="file">
                    <img src="{$userinfo.avatar}" class="avatar-img"> <span class="loading"></span>
                </div>
            </div>
        </div>
        <div class="layui-form-pane layui-tab-item">
            <form class="layui-form" method="post">
                <div class="layui-form-item"> <label class="layui-form-label">{:lang('OldPassword')}</label>
                    <div class="layui-input-inline"> <input type="password" name="oldpassword" required="" lay-verify="required" autocomplete="off" class="layui-input"> </div>
                </div>
                <div class="layui-form-item"> <label class="layui-form-label">{:lang('NewPassword')}</label>
                    <div class="layui-input-inline"> <input type="password" name="newpassword" required="" lay-verify="required" autocomplete="off" class="layui-input"> </div>
                </div>
                <div class="layui-form-item"> <label class="layui-form-label">{:lang('ConfirmPassword')}</label>
                    <div class="layui-input-inline"> <input type="password" name="renewpassword" required="" lay-verify="required" autocomplete="off" class="layui-input"> </div>
                </div>
                <div class="layui-form-item"> <button class="layui-btn" lay-submit="{:url('member/index/changepwd')}" data-refresh="false">{:lang('Confirm')}</button> </div>
            </form>
        </div>
    </div>
</div>
{/block}
{block name="js"}
<script type="text/javascript">
    //上传图片
    layui.use(['yznForm','upload'], function(upload) {
        var yznForm = layui.yznForm,
            upload = layui.upload;
        var avatarAdd = $('.avatar-add');


        yznForm.listen();
        upload.render({
            elem: '.upload-img',
            url: GV.image_upload_url,
            size: 50,
            before: function() {
                avatarAdd.find('.loading').show();
            },
            done: function(res) {
                if (res.code == 1) {
                    $.post(GV.profile_upload_url, {
                        avatar: res.path
                    }, function(data) {
                        layer.msg('上传成功！', { icon: 1});
                        $('.avatar-img').attr('src', res.path);
                        //location.reload();
                    });
                } else {
                    layer.msg(res.info, { icon: 5 });
                }
                avatarAdd.find('.loading').hide();
            },
            error: function() {
                avatarAdd.find('.loading').hide();
            }
        });
    });
</script>
{/block}